<template>
 <div class="star star-24">
                  <span class="star-item "

                  v-for="(item,index) in   filterStar"
                  :key="index"
                  :class="item"

                  ></span>
                  <!-- <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item half"></span>
                  <span class="star-item off"></span> -->
 </div>
</template>

<script>
export default {
    props:['fontSize','ratings'],
  name: '',
  data () {
    return {
    }
  },
  methods: {},
  computed: {
      filterStar(){

        //   var  starArr=['on','on','on','half','off'];
        //  4.7    4 on    1 half
        // 3.2    3  on     2 off
        //  3.5    3on     1 half  1 off
        let starArr=[];
        let ratings=this.ratings;
        console.log(ratings)
        //判断全星的数量  等于ratings的整数部分
        let onStarCount=Math.floor(ratings);
        //根据评分的整数值向starArr[]里添加对应数量的on类名利用:class="item"绑定属性
        for (var i=0;i<onStarCount;i++){
          starArr.push("on");
        }
        //判断半星数量  如果ratings的小数部分小于.5  也就相当于小数部分*10-5>=0
        let halfStarCount=(ratings-onStarCount)*10-5;
        if(halfStarCount>=0){
          starArr.push('half')
        }
        //判断空星的数量  根据starArr的length 如果小于5就给它添加个off  直到length加到5停止
        while(starArr.length<5){
          starArr.push("off")
        }
        return starArr


      }
  },
}
</script>


<style scoped lang="stylus">
@import '../../common/stylus/mixins.styl'
                        .star
                            float left
                            font-size 0
                            .star-item
                              display inline-block
                              background-repeat no-repeat
                            &.star-48
                              .star-item
                                width 20px
                                height 20px
                                margin-right 22px
                                background-size 20px 20px
                                &:last-child
                                  margin-right: 0
                                &.on
                                  bg-image('./images/stars/star48_on')
                                &.half
                                  bg-image('./images/stars/star48_half')
                                &.off
                                  bg-image('./images/stars/star48_off')
                            &.star-36
                              .star-item
                                width 15px
                                height 15px
                                margin-right 6px
                                background-size 15px 15px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star36_on')
                                &.half
                                  bg-image('./images/stars/star36_half')
                                &.off
                                  bg-image('./images/stars/star36_off')
                            &.star-24
                              .star-item
                                width 10px
                                height 10px
                                margin-right 3px
                                background-size 10px 10px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star24_on')
                                &.half
                                  bg-image('./images/stars/star24_half')
                                &.off
                                  bg-image('./images/stars/star24_off')


</style>
